<template>
    <div class="box">
        <div class="search">
            <div class="search-top">
                <el-icon>
                    <Search />
                </el-icon>筛选搜索
            </div>
            <div>
                <el-button>重置</el-button>
                <el-button type="primary" @click="searchFn">查询搜索</el-button>
            </div>
        </div>
        <div>
            <div class="input">
                <el-form-item label="活动名称：" label-width="150px">
                    <el-input v-model="keyword" />
                </el-form-item>
            </div>
        </div>
    </div>
    <div class="record">
        <div class="record-top">
            <span>
                <el-icon>
                    <Tickets />
                </el-icon>
            </span>
            <span>数据列表</span>
        </div>
        <div>
            <el-button>秒杀时间段列表</el-button>
            <el-button>添加活动</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search, Tickets } from "@element-plus/icons-vue"

defineProps(["keyword"])
const emit = defineEmits(["resetKeyword", "getlistFn"])
const searchFn = () => {
    emit("getlistFn")
    // console.log(111);
}




</script>

<style  lang="less" scoped>
.box {
    border: 1px solid #c0c4d1;
    padding: 20px;
    color: black;

    .search {
        display: flex;
        justify-content: space-between;


    }

    .input {
        margin-top: 20px;
        width: 350px;
    }
}

.record {
    border: 1px solid #c0c4d1;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    // height: 50px;
    // line-height: 50px;
    padding: 20px;
    color: black;
}
</style>